<template>
  <div>
    <el-row v-if="titleType=='card'">
      <el-col :span="12" style="text-align:left">
        <span style="font-family:Microsoft;font-size: 15px;font-weight: bold;">部门信息</span>
      </el-col>
      <el-col :span="12" style="text-align: right">
        <el-dropdown @command="handleCommand">
          <span><i class="joys-icon-fusionmenu"></i></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="add">新增</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
    <el-row v-if="titleType=='list'">
      <el-button size="small" type="primary" icon="el-icon-refresh" @click="load">刷新</el-button>
      <el-button size="small" type="primary" icon="el-icon-plus" @click="handleCommand">新建</el-button>
    </el-row>
    <el-row v-if="this.data.length==0" style="text-align: center">
      没有数据
    </el-row>
    <el-table :data="data" v-if="status=='table'&&this.data.length>0"
              @current-change="handleCurrentChange" highlight-current-row>
      <el-table-column label="编码" align="left">
        <template slot-scope="scope">
          <i v-if="!scope.row.editable&&scope.row.children.length>0"
             :style="'margin-left: '+scope.row.indent+'px'"
             :class="scope.row.icon||'el-icon-arrow-right'"
             @click="expandChange(scope.$index, scope.row)"></i>
          <span v-if="!scope.row.editable&&scope.row.children.length>0">{{scope.row.deptCode}}</span>
          <span v-if="!scope.row.editable&&scope.row.children.length==0">&nbsp;&nbsp;&nbsp;&nbsp;{{scope.row.deptCode}}</span>
          <el-input v-if="scope.row.editable" v-model="scope.row.deptCode"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="deptName" title="deptName" label="部门名称" align="left">
        <template slot-scope="scope">
          <ft-input :editable="scope.row.editable" v-model="scope.row.deptName"></ft-input>
        </template>
      </el-table-column>
      <el-table-column prop="managerId" label="负责人" align="left">
        <template slot-scope="scope">
          <ft-user-select v-model="scope.row.managerId" :editable="scope.row.editable"></ft-user-select>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" align="left">
        <template slot-scope="scope">
          <ft-input :editable="scope.row.editable" type="textarea" v-model="scope.row.remark"></ft-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button slot="reference" type="text" v-if="scope.row.editable" size="small"
                     @click="save(scope.$index,scope.row)">保存
          </el-button>
          <el-button slot="reference" type="text" v-if="scope.row.editable" size="small"
                     @click="cancel(scope.$index,scope.row)">取消
          </el-button>
          <el-button slot="reference" type="text" v-if="!scope.row.editable" size="small"
                     @click="edit(scope.$index, scope.row)">编辑
          </el-button>
          <el-popover v-if="!scope.row.editable"
                      placement="top"
                      width="160"
                      v-model="scope.row.delVisible">
            <p>确定删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="small" type="text" @click="scope.row.delVisible = false">取消</el-button>
              <el-button type="primary" size="small" @click="handleDelete(scope.$index, scope.row)">确定</el-button>
            </div>
            <el-button slot="reference" type="text" size="small" style="color: #b96463">删除</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import FtDept from "./FtDept";

  export default {
    name: "OrgDept",
    components: {FtDept},
      props: ['orgId', 'parentId','titleType'],
    data() {
      return {
        status: 'table',
        editable: true,
        form: {},
        data: [],
        currentRow: null,
        currentIndex: null
      }
    },
    mounted() {
      this.load()
    },
    methods: {
      load() {
        if (this.orgId) {
          this.data = []
          this.$http.get('/joys-rest/joys-master-data/dept/byOrgAndDept/' + this.orgId).then(resp => {
            this.data = resp.body
            this.data.forEach((item, index) => {
              item.indent = 0
              item.editable = false
              item.internalCode = item.deptId
              if (!item.children) {
                item.children = []
              }
            })
          }, resp => {
            this.$message.error(resp.body.message)
          })
        }
      },
      handleCurrentChange(currentRow, oldCurrentRow) {
        if (currentRow && currentRow.deptId) {
          this.currentIndex = this.data.findIndex((value, index, arr) => {
            return currentRow.deptId == value.deptId
          })
        }
        this.currentRow = currentRow
      },
      handleCommand(value) {
        if (this.currentRow == null) {
          this.data.push({
            deptId: null,
            orgId: this.orgId,
            editable: true,
            indent: 0,
            internalCode: null
          })
        } else if (this.currentRow.deptId) {
          let item = {
            deptId: null,
            orgId: this.orgId,
            parentId: this.currentRow.deptId,
            indent: this.currentRow.indent + 10,
            editable: true,
            internalCode: this.currentRow.internalCode
          }
          if (!this.currentRow.children) {
            this.currentRow.children = []
          }
          this.currentRow.children.push(item)
          this.data.splice(this.currentIndex + 1, 0, item)
        }
      },
      cancel(index, value) {
        if (value.deptId) {
          this.$http.get('/joys-rest/joys-master-data/dept/' + value.deptId).then(resp => {
            resp.body.editable = false
            this.$set(this.data, index, resp.body)
          }, resp => {
            this.$message.error(resp.body.message)
          })
        } else {
          this.data.splice(index, 1)
        }
      },
      edit(index, value) {
        value.editable = true
        this.$set(this.data, index, value)
      },
      save(index, value) {
        let indent = value.indent
        let internalCode = value.internalCode
        this.$http.post('/joys-rest/joys-master-data/dept/save', value).then(resp => {
          resp.body.editable = false
          resp.body.indent = indent
          resp.body.internalCode = internalCode
          this.$set(this.data, index, resp.body)
          this.currentIndex = this.data.findIndex((value, index, arr) => {
            return resp.body.deptId == value.deptId
          })
          this.$message.success('操作成功！')
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },
      expandChange(index, value) {
        if (!value.icon || value.icon == 'el-icon-arrow-right') {
          value.icon = 'el-icon-arrow-down'
          if (value.children) {
            let startIndex = index
            let indent = value.indent || 0
            value.children.forEach((item, childIndex) => {
              item.indent = indent + 10
              item.internalCode = value.internalCode + item.deptId
              item.editable = false
              this.data.splice(++startIndex, 0, item)
            })
          }
        } else {
          value.icon = 'el-icon-arrow-right'
          if (value.children) {
            var startIndex = index + 1
            var step = 0
            for (startIndex; startIndex < this.data.length; startIndex++) {
              if (!this.data[startIndex].internalCode||this.data[startIndex].internalCode.indexOf(value.internalCode) != 0) {
                break
              }
              this.data[startIndex].icon = 'el-icon-arrow-right'
              ++step
            }
            this.data.splice(index + 1, step)
          }
        }
        this.$set(this.data, index, value)
      },
      handleDelete(index, value) {
        this.$http.delete('/joys-rest/joys-master-data/dept/deleteDept/' + value.deptId + '/' + value.dataVersion, value).then(resp => {
          this.data.splice(index, 1)
          this.$message.success('删除成功！')
        }, resp => {
          this.$message.error(resp.body.message)
        })
      }
    },
    watch: {
      orgId() {
        this.load()
      }
    }
  }
</script>

<style scoped>

</style>
